<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@input的用法</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--@input 是 Vue.js 中的事件绑定语法，用来监听 DOM 元素的 input 事件。

在 HTML 中，input 事件会在用户输入内容（如键盘敲击、粘贴等）时触发。而在 Vue 中，@input 可以用于监听这个事件并执行对应的回调函数。

1. @input 的作用
监听用户对输入框的操作（如输入、删除字符）。
获取用户输入的新值并对其进行处理。

2. 使用场景

@input 常用来实现手动双向绑定，或者在用户输入内容时触发一些逻辑操作。
基本示例：手动双向绑定
假设我们有一个输入框，绑定了 value 属性，但需要通过 @input 更新数据：

<div id="app">
  <input :value="message" @input="updateMessage">
  <p>输入的内容是：{{ message }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: ''
    },
    methods: {
      updateMessage(event) {
        // 手动更新数据
        this.message = event.target.value;
      }
    }
  });
</script>

:value="message"：单向绑定，输入框的值显示 message。
@input="updateMessage"：监听输入框的输入事件，并调用 updateMessage 方法，将用户输入的值同步到 message。

3. @input 与 v-model 的关系

v-model 是 :value 和 @input 的简写语法糖。
等价写法：
<input v-model="message">

展开后等价于：
<input :value="message" @input="message = $event.target.value">
其中：
	•	:value="message"：将数据绑定到输入框的值。
	•	@input="message = $event.target.value"：监听用户输入，并将新值更新到数据。

4. 更复杂的使用场景

实时数据处理

可以在 @input 的回调函数中对用户输入进行处理，例如过滤特殊字符、格式化输入内容等。

<div id="app">
  <input :value="filteredMessage" @input="filterInput">
  <p>过滤后的内容是：{{ filteredMessage }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      filteredMessage: ''
    },
    methods: {
      filterInput(event) {
        // 只保留数字
        this.filteredMessage = event.target.value.replace(/[^0-9]/g, '');
      }
    }
  });
</script>

在这个例子中，用户在输入框中输入内容时，输入的值会自动过滤掉非数字字符。

5. 总结

特性	描述
作用	监听输入框内容的变化（input 事件）
常见使用场景	手动双向绑定、实时处理输入
与 v-model 的关系	v-model 内置了 @input 的逻辑
如果需要更精细的控制用户输入，@input 是一个非常有用的工具。-->

<div id="app">
    <input :value="message" @input="updateMessage">
    <p>输入的内容是：{{ message }}</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: ''
        },
        methods: {
            updateMessage(event) {
                // 手动更新数据
                this.message = event.target.value;
            }
        }
    });
</script>
</body>
</html>